<template>
  <el-form :model="searchParams" label-width="auto">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="分类">
          <el-select v-model="searchParams.category" placeholder="请选择分类" clearable>
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select
            v-model="searchParams.tag"
            placeholder="请选择标签"
            clearable
            multiple
          >
            <el-option
              v-for="item in tagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="时间">
          <el-date-picker
            v-model="searchParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue";

const props = defineProps<{ searchParams: any }>();
const emits = defineEmits(["search", "reset"]);

const categoryOptions = ref([
  { label: "全部", value: "" },
  { label: "技术", value: "tech" },
  { label: "生活", value: "life" },
  { label: "其他", value: "other" },
]);
const tagOptions = ref([
  { label: "Vue", value: "vue" },
  { label: "React", value: "react" },
  { label: "前端", value: "frontend" },
  { label: "后端", value: "backend" },
  { label: "随笔", value: "note" },
]);

function onSearch() {
  emits("search", { ...props.searchParams });
}
function onReset() {
  emits("reset");
}
</script>

<style scoped></style>
